<template>
	<view>
		<view class="content1">
			<view class="title">
				{{activity.title}}
			</view>
			<view class="money">
				<span class="icon">￥</span>{{activity.price}}
			</view>
		</view>
		<view class="content">
			<view class="title">
				支付方式
			</view>
			<view class="wx" @click="selectPayment('wx')">
				<image class="img1" src="https://pw.qyang.cc/static/wx.png" mode=""></image>
				微信
				<image class="btn-img1" v-if="selectedItem=='wx'" src="https://pw.qyang.cc/static/commit-success.png" mode="">
				</image>
				<image class="btn-img1" v-else src="https://pw.qyang.cc/static/selected-null.png" mode=""></image>
			</view>
			<!-- #ifndef MP-WEIXIN -->
			<view class="zfb" @click="selectPayment('zfb')">
				<image class="img1" src="https://pw.qyang.cc/static/zfb.png" mode=""></image>
				支付宝
				<image class="btn-img1" v-if="selectedItem=='zfb'" src="https://pw.qyang.cc/static/commit-success.png" mode="">
				</image>
				<image class="btn-img1" v-else src="https://pw.qyang.cc/static/selected-null.png" mode=""></image>
			</view>
			<!-- #endif -->
		</view>
		<view class="bottom">
			<view class="text">合计：￥{{activity.price}}</view>
			<view class="btn" @click="toPay()">确认支付</view>
		</view>
	</view>
</template>

<script>
	import Pay from '@/utils/pay.js';
	export default {
		data() {
			return {
				activity: {},
				money: '0.00',
				selectedItem: 'wx',
			};
		},
		onLoad(opt) {
			this.activity = JSON.parse(decodeURIComponent(opt.params))
			console.log(this.activity)
		},
		methods: {
			selectPayment(paymentType) {
				if (paymentType === 'wx') {
					this.selectedItem = 'wx';
				} else if (paymentType === 'zfb') {
					this.selectedItem = 'zfb';
				}
			},
			toPayOld() {
				let pay_channel = ''
				let _this = this
				if(this.selectedItem == 'wx'){
					pay_channel = 'wxmini'
				}
				this.rq.getData('User_Activity/getPayment',{id:this.activity.id,pay_channel:pay_channel}).then(res=>{
					if(res.code==1){
						_this.payment(res.data.payment)
					}
				})
			},
			
			toPay() {
				let pay_channel = ''
				let _this = this
				if(this.selectedItem == 'wx'){
					pay_channel = 'wechat'
				}
				var selectedItem='wechat';
				if (this.selectedItem === 'wx') {
					selectedItem = 'wechat';
				} else if (this.selectedItem === 'zfb') {
					selectedItem = 'alipay';
				}
				this.rq.getData('User_Activity/signup',{id:this.activity.id}).then(res=>{
					if(res.code==1){
						new Pay(selectedItem, 'activity2', res.data.id);
					}
				})
			},
			
			payment(params){
				let _this = this
				if (this.payLoading) return
				this.payLoading = true
				//#ifdef MP-WEIXIN
					uni.requestPayment({
						provider: "wxpay",
						timeStamp: params.timeStamp, // 时间戳（单位：秒）
						nonceStr: params.nonceStr, // 随机字符串
						package: params.package, // 固定值
						signType: params.signType,
						paySign: params.paySign,
						success(res) {						   
						    uni.showToast({
						        title: '支付成功',
						        icon: 'success',
						        duration: 2000,
						        success() {
									 _this.payLoading = false
									 uni.navigateTo({
									 	url: '/subpages/activity/result'
									 })
						        }
						    })
						},
						fail(e) {
						    _this.payLoading = false
						    uni.showToast({
						        title: '支付失败',
						        icon: 'none'
						    })
						    console.log("requestPayment=>fail", e)
						}
					})
				//#endif
			},
		}
	}
</script>

<style lang="scss">
	.content1 {
		width: 680rpx;
		border-radius: 8px;
		opacity: 1;
		background: #FFFFFF;
		padding: 20rpx;
		margin: 30rpx auto;

		font-family: PingFang SC;
		font-size: 14px;
		font-weight: normal;
		line-height: 14px;
		letter-spacing: 0px;

		color: #333333;

		.title {
			width: 80%;
			margin: 20rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			-o-text-overflow: ellipsis;
		}

		.money {
			text-align: end;
			/* 179 */
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 16px;

			/* ￥ */
			.icon {
				font-size: 14px;
			}
		}
	}

	.content {
		width: 680rpx;
		border-radius: 8px;
		opacity: 1;
		background: #FFFFFF;
		padding: 20rpx;
		margin: 30rpx auto;

		font-family: PingFang SC;
		font-size: 14px;
		font-weight: normal;
		line-height: 14px;
		letter-spacing: 0px;

		color: #333333;

		.title {
			margin: 20rpx;
		}

		.wx {
			display: flex;
			margin: 20rpx;
			padding: 30rpx 0;

			.img1 {
				width: 14px;
				height: 14px;
				margin-right: 10rpx;
			}

			.btn-img1 {
				width: 16px;
				height: 16px;
				position: absolute;
				right: 24px;
			}
		}

		.zfb {
			display: flex;
			margin: 20rpx;
			padding: 30rpx 0;

			.img1 {
				width: 14px;
				height: 14px;
				margin-right: 10rpx;
			}

			.btn-img1 {
				width: 16px;
				height: 16px;
				position: absolute;
				right: 24px;
			}
		}
	}

	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #ffffff;
		z-index: 1;

		display: flex;
		align-items: center;

		.text {
			font-family: 阿里巴巴普惠体 2.0;
			font-size: 13px;
			font-weight: normal;
			line-height: 45px;
			letter-spacing: 0px;
			color: #333333;
			margin: 0 40rpx;
			width: 40%;
			height: 88rpx;
			text-align: start;
		}

		.btn {
			font-weight: bold;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 38rpx;
			text-align: center;
			line-height: 88rpx;
			margin: 15rpx 20rpx;
			background: #FF5866;
			border-radius: 102px;
			border: 1px solid #FF5866;
			width: 40%;
		}
	}
</style>